<template lang="html">
  <div class="run-record">
    <Returns rTitle='我的跑步记录'/>
    <div class='record' v-for="(item,index) in CousrseData">
      <div class='run'>
        <div class="data-time">
          <div>{{ item.date }}</div>
          <div>{{ item.time }}</div>
        </div>
        <div class="run-number">
          {{ item.title }}
        </div>
        <div class="run-cost">
          <div>时速:{{ item.speed }}</div>
          <div>用时:{{ item.spend }}</div>
          <div>消耗:{{ item.cost }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Returns from './Returns';
export default {
  data(){
    return{
      CousrseData:[]
    }
  },
  mounted () {
    this.$axios.get(this.HOST +'http://localhost:3000/burning/rundata')
    .then(res => {
      this.CousrseData = res.data
    })
    .catch(error => {
      console.log(error)
    })
  },
  components:{
    Returns
  }
}
</script>

<style lang="less" scoped>
.run-record{
  .banner{
    height: 88/100rem;
    line-height: 88/100rem;
    background-color: #171818;
    color: #fff;
    text-align: center;
    letter-spacing: 2/100rem;
    position: relative;
    font-size: 34/100rem;
    i{
      font-size: 25/100rem;
      color:#fff;
      position: absolute;
      left:20/100rem;
    }
  }
  .record{
    background: rgb(239,239,239);
    padding: 10/100rem;
    .run{
      background:#fff;
      padding: 10/100rem 20/100rem;
      .data-time{
        overflow: hidden;
        div{
          float: left;
          margin-left: 15/100rem;
          font-size: 20/100rem;
        }
      }
      .run-number{
        margin-top: 30/100rem;
        margin-left: 15/100rem;
        font-size:40/100rem;
      }
      .run-cost{
        overflow: hidden;
        div{
          float: left;
          margin-left: 15/100rem;
          font-size: 25/100rem;
        }
      }
    }
  }
}


</style>
